<%@page contentType="text/html" pageEncoding="utf8" language="java" import="java.io.*" %>
<%@page import="btsm.bean.sysPro, java.util.Map"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%
			
		sysPro sPro = new sysPro();
		String strId = request.getParameter("linkId"); 
		
%>	
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>光纤地图</title>
		<script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=<%=sPro.getMapKey()%>" type="text/javascript"></script>
		<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"type="text/javascript"></script>  
		<script type='text/javascript' src='/btsm/dwr/interface/JFiberWeb.js'></script>
		<script type='text/javascript' src='/btsm/dwr/engine.js'></script>
		<script type='text/javascript' src='/btsm/dwr/util.js'></script>	
</script> 
</head>

<body onunload="GUnload()" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">		
		
		
      
<script type="text/javascript">
var clat = <%=sPro.getCLat()%>;
var clng = <%=sPro.getCLng()%>;	

var map;
var currentMarker;
var allNodes = [];

function initialize() 
{
	map = new GMap2(document.getElementById("map_canvas"));
	map.setCenter(new GLatLng(clat, clng), 9);
	map.addControl(new GLargeMapControl());
	map.addMapType(G_PHYSICAL_MAP);
	map.addControl(new GMenuMapTypeControl());
	map.addControl(new GOverviewMapControl());
	map.addControl(new GScaleControl());
	
	GEvent.addListener(map, "moveend", function() { 
		HideFunElement('linkQuery');	
		HideFunElement('btsinfo');	
	});
	
	
	if('<%=strId%>' != 'null')
	{			
		JFiberWeb.getSectionOutInfoListByID('<%=strId%>',"",map.getZoom(),function(sectionList)
		{		
			var blueIcon = new GIcon(G_DEFAULT_ICON); 
			var markerOptions = { icon:blueIcon }; 
			var centerLng = 0.0;
			var centerLat = 0.0; 
			if(sectionList !== null && sectionList !== "" )
			{
				var allLng = 0.0;
				var allLat = 0.0;
				allNodes.length = 0;				
				for(var property in sectionList)
				{
					allNodes.push(sectionList[property]);
					var point = new GLatLng(sectionList[property].lat, sectionList[property].lng); 
					if(property != 0)
					{
						var color = "#FF0000";	
						if(sectionList[property].ocLayType == 0)
							color = "#FF0000";	
						else if(sectionList[property].ocLayType == 1)
							color = "#FFFF00";	
						else if(sectionList[property].ocLayType == 1)
							color = "#FF00FF";		
						var polyline = new GPolyline(
											[
											   new GLatLng(centerLat, centerLng),
											   point
											], //GLatLng()数组 
											color, //折线颜色
											5, //折线宽度
											0.5 //透明度
											); 
						polyline.title = "dddd";					
						map.addOverlay(polyline);
					}
					 
					var gMarker;
					if(property == 0)
						gMarker =  new GMarker(point, {icon:blueIcon ,title: "起点"});
					else if(property == sectionList.length-1)
						gMarker =  new GMarker(point, {icon:blueIcon ,title: "终点"});	
					else 
						gMarker =  new GMarker(point, {icon:blueIcon});
					gMarker.value = property;						
															
					map.addOverlay(gMarker); 
					
					addListener(gMarker,point,sectionList[property].ocName,
								sectionList[property].poleNum ,
								formOcLayType(sectionList[property].ocLayType),
								sectionList[property].routeInfo,
								sectionList[property].lng,
								sectionList[property].lat,
								sectionList[property].granularity,
								sectionList[property].distance);
					
					centerLng = sectionList[property].lng;
					centerLat = sectionList[property].lat;
					
					allLng = allLng + parseFloat(sectionList[property].lng);
					allLat = allLat + parseFloat(sectionList[property].lat);
					
				}
				map.setCenter(new GLatLng(allLat/sectionList.length, allLng/sectionList.length), 9);	
			}		
		})
			

		
	}
}	

function formOcLayType(value)
{
	if(value == '0')
		return '电杆';
	else if(value == '1')	
		return '管道';
	else
		return '直埋';
}

function addListener(pointMarker,latlng,ocName,poleNum,ocLayType,routeInfo,lng,lat,granularity,distance) {  
    GEvent.addListener(pointMarker, "mouseover", function(){  
		UpdateNodeInfo(ocName,poleNum,ocLayType,routeInfo,lng,lat,granularity,distance);	
		ShowFunElement('btsinfo'); 
    });  
} 
   
   
function ShowQueryDiv(strElement)
{
  document.getElementById(strElement).style.display = "block";
}
function HideFunElement(strElement)
{
  document.getElementById(strElement).style.display = "none";
}	

function AddItem(obj,text,value)
{
	var varItem = new Option(text,value);
	obj.options.add(varItem);
}

var querySectionId = "";
function refreshModelList() 
{
    var inputValue = document.getElementById("strBTSName_ID").value;	
	var arryValue = inputValue.split(" ");
	var strBTSName = "";
	var strDistance = "";
	var isInputDistance = false;
	if(arryValue.length == 2)
	{
		strBTSName = arryValue[0];
		strDistance = arryValue[1];
		isInputDistance = true;
	}else 
	{
		strBTSName = inputValue;
		isInputDistance = false;
		querySectionId = "";
	}
	JFiberWeb.getSectionOutInfoListByInputValue(strBTSName,strDistance,function(objList)
	{
		DWRUtil.removeAllOptions("sectionListID" );   		 
		if(objList!=null)
		{
			var obj = document.getElementById("sectionListID");
			for(var property in objList)
			{
				if(isInputDistance)
					querySectionId = objList[property].id;
				else
					querySectionId = "";
				AddItem(obj,objList[property].ocName,objList[property].ocid); 
			}
			//DWRUtil.addOptions('sectionListID',objMap); 
		}else{
			DWRUtil.addOptions('sectionListID',['Nothing Data...']);
		}
	}) 
	//alert(querySectionId);	
}


window.onload = initialize;	

function showSectionMap() 
{
    var objSectionID = document.getElementById("sectionListID");
	
	//alert(map.getSize() +"::"+map.getZoom() );
	JFiberWeb.getSectionOutInfoListByID(objSectionID.value,querySectionId,map.getZoom(),function(sectionList)
	{		
		 
		var blueIcon = new GIcon(G_DEFAULT_ICON); 
		var markerOptions = { icon:blueIcon }; 
		var centerLng = 0.0;
		var centerLat = 0.0; 
		if(sectionList !== null && sectionList !== "" )
		{
			var allLng = 0.0;
			var allLat = 0.0;
			allNodes.length = 0;	
			map.clearOverlays(); 			
			for(var property in sectionList)
			{
				allNodes.push(sectionList[property]);
				var point = new GLatLng(sectionList[property].lat, sectionList[property].lng); 
				if(property != 0)
				{
					var color = "#FF0000";	
					if(sectionList[property].ocLayType == 0)
						color = "#FF0000";	
					else if(sectionList[property].ocLayType == 1)
						color = "#FFFF00";	
					else if(sectionList[property].ocLayType == 1)
						color = "#FF00FF";		
					var polyline = new GPolyline(
										[
										   new GLatLng(centerLat, centerLng),
										   point
										], //GLatLng()数组 
										color, //折线颜色
										5, //折线宽度
										0.5 //透明度
										); 
					polyline.title = "dddd";					
					map.addOverlay(polyline);
				}
				 
				var gMarker;
				
				if(querySectionId != "" && querySectionId == sectionList[property].id)
				{
					var selectIcon = new GIcon(G_DEFAULT_ICON); 
					selectIcon.image = "http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";
					var markerSelectOptions = { icon:selectIcon }; 		
					gMarker = new GMarker(point, markerSelectOptions);
				}else
				{
					if(property == 0)
						gMarker =  new GMarker(point, {icon:blueIcon ,title: "起点"});
					else if(property == sectionList.length-1)
						gMarker =  new GMarker(point, {icon:blueIcon ,title: "终点"});	
					else 
						gMarker =  new GMarker(point, {icon:blueIcon});
				}
				gMarker.value = property;						
														
				map.addOverlay(gMarker); 
				
				addListener(gMarker,point,sectionList[property].ocName,
							sectionList[property].poleNum ,
							formOcLayType(sectionList[property].ocLayType),
							sectionList[property].routeInfo,
							sectionList[property].lng,
							sectionList[property].lat,
							sectionList[property].granularity,
							sectionList[property].distance);
				
				centerLng = sectionList[property].lng;
				centerLat = sectionList[property].lat;
				
				allLng = allLng + parseFloat(sectionList[property].lng);
				allLat = allLat + parseFloat(sectionList[property].lat);
								
			}
			map.setCenter(new GLatLng(allLat/sectionList.length, allLng/sectionList.length), 9);	
		}	 
		 	
	})
}

function UpdateNodeInfo(ocName,poleNum,ocLayType,routeInfo,lng,lat,granularity,distance)
{	
	document.getElementById("tdOcName").innerHTML = "中继段名称:<B><I>"+ocName+"</I></B>";
	document.getElementById("tdLng").innerHTML = "经度:<B><I>"+lng+"</I></B>";
	document.getElementById("tdLat").innerHTML = "维度:<B><I>"+lat+"</I></B>";
	document.getElementById("tdPoleNum").innerHTML = "杆号:<B><I>"+poleNum+"</I></B>";
	document.getElementById("tdDistance").innerHTML = "与前一节点长度:<B><I>"+distance+"</I></B>";
	document.getElementById("tdGranularity").innerHTML = "本地累加长度:<B><I>"+granularity+"</I></B>";
	document.getElementById("tdOcLayType").innerHTML = "敷设方式:<B><I>"+ocLayType+"</I></B>";
	document.getElementById("tdRouteInfo").innerHTML = "路由信息:<B><I>"+routeInfo+"</I></B>";
}

function ShowFunElement(strElement){
  document.getElementById(strElement).style.display = "block";
}
</script>
	

<table width="100%" border="0">
  <tr>
    <td colspan="9"><div id="map_canvas" style="width: 100%; height: 589px"></div></td>
  </tr>
  <tr> 
	<td width="80px" align="center"><input type="button" name="btbtsquery3" value="　查询　 " onClick="ShowQueryDiv('linkQuery');"></td>	 
  </tr>
</table> 

<div id="linkQuery" style="position:absolute; left:560px; top:100px; width:10px; height:10px; display:none">
<table width="100%" height="291" align="center" border="0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
  <tr>
    <td height="32" colspan="2" align="center" bgcolor="#FF9900"><span class="style1">光纤环查询</span></td>
  </tr>
  <tr>
    <td height="22" colspan="2" align="left" bgcolor="#99CCCC">请输入关键字(名称或者编号)：</td>
  </tr>
  <tr>
    <td width="171" height="25" bgcolor="EDF2FC">
		<input name="strBTSName" type="text" id="strBTSName_ID" onKeyDown="if(event.keyCode==13){refreshModelList()};" size="21">
	</td>
    <td width="85" bgcolor="EDF2FC">
		<input name="button" type="button" value="　查询　" onClick="refreshModelList()" >
	</td>
  </tr>
  <tr>
    <td height="143" bgcolor="EDF2FC" colspan="2">
		<select name="select" id="sectionListID" size="10" style="width:260px;height:200px" onkeypress="showSectionMap();" onclick="showSectionMap();">
		</select>
	</td>
  </tr>
</table>
</div>


<div id="btsinfo" style="position:absolute; left:98px; top:10px; width:188px;display:none">
<table width="178" height="248" bgcolor="#996633" align="center" border="0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
	<tr><td height="27" align="center" bgcolor="#FF9900" id="tdOcName"></td></tr>
	<tr><td bgcolor="EDF2FC" id="tdLng"></td></tr>
	<tr><td bgcolor="EDF2FC" id="tdLat"></td></tr>
	<tr><td bgcolor="EDF2FC" id="tdPoleNum"></td></tr>
	<tr><td bgcolor="EDF2FC" id="tdDistance"></td></tr>
	<tr><td bgcolor="EDF2FC" id="tdGranularity"></td></tr>
	<tr><td bgcolor="EDF2FC" id="tdOcLayType"></td></tr>
	<tr><td bgcolor="EDF2FC" id="tdRouteInfo"></td></tr>
</table>
</div>


</body>
</html>
